<template>
  <el-dialog
    :title="title"
    :visible="visible"
    :width="width"
    :center="center"
    :modal="modal"
    append-to-body
    top="10vh"
    :close-on-click-modal="false"
    :close-on-press-escape="false"
    @close="handleDialgAction('close')"
    type
  >
    <div class="wf-dialog-content">
      <slot />
    </div>
    <div class="wf-dialog-footer" :class="{ 'text-center': actionCenter }" slot="footer">
      <slot name="action">
        <m-button :loading="pending" class="w-80" v-if="showSaveButton" @click="handleDialgAction('stage')">{{ saveButtonText }}</m-button>
        <m-button :loading="pending" class="w-80" v-if="showConfirmButton" @click="handleDialgAction('confirm')">{{ confirmButtonText }}</m-button>
        <m-button class="w-80" v-if="showCancelButton" @click="handleDialgAction('close')">{{ cancelButtonText }}</m-button>
      </slot>
    </div>
  </el-dialog>
</template>

<script>
export default {
  name: 'MDialog',
  props: {
    visible: {
      type: Boolean,
      default: false,
    },
    title: {
      type: String,
      default: '提示',
    },
    width: {
      type: String,
      default: '680px',
    },
    center: {
      type: Boolean,
      default: false,
    },
    modal: {
      type: Boolean,
      default: true,
    },
    showCancelButton: {
      type: Boolean,
      default: true,
    },
    cancelButtonText: {
      type: String,
      default: '关闭',
    },
    showConfirmButton: {
      type: Boolean,
      default: true,
    },
    confirmButtonText: {
      type: String,
      default: '提交',
    },
    showSaveButton: {
      type: Boolean,
      default: false,
    },
    saveButtonText: {
      type: String,
      default: '暂存',
    },
    actionCenter: {
      type: Boolean,
      default: true,
    },
    pending: {
      type: Boolean,
      default: false,
    },
  },
  data() {
    return {
      pendingFlag: false,
    }
  },
  methods: {
    handleDialgAction(type) {
      if (!this.visible) return
      this.$emit(type)
    },
  },
}
</script>

<style lang="scss" scoped>
::v-deep {
  .el-dialog__header {
    background-color: #f5f5f5;
    .el-dialog__title {
      font-weight: 600;
      color: var(--theme-color);
    }
  }
  .el-dialog__body {
    max-height: 60vh;
    overflow-y: auto;
  }
  .el-dialog__footer {
    background-color: #f5f5f5;
  }
}
</style>
